<template>
  <div id="index">
    <!-- 模态框 -->
    <div class="zheZhao" v-show="visib">
      <div class="tanChuCeng">
        <button v-on:click="visib = false">关闭</button>
        <form>
          <input type="text" placeholder="用户">
        </form>
      </div>
    </div>
    <!-- 弹出按钮 -->
    <button v-on:click="visib = true">显示与隐藏</button>
    2020年11月26日
    <!-- v-if：用来控制元素的销毁与加载的
      tab选项卡
       -->
    <div id="box" v-if:="false">我是一段内容</div>
    <hr>
    <!-- 选项卡按钮 -->
    <button v-on:click="index = 1">01</button>
    <button v-on:click="index = 2">02</button>
    <button v-on:click="index = 3">03</button>
    <!-- 选项卡面板 -->
    <ul>
      <li v-if="index === 1" style="background:red;">1</li>
      <li v-if="index === 2" style="background:green;">2</li>
      <li v-if="index === 3" style="background:blue;">3</li>
    </ul>
  </div>
</template>
<script>
//以后每天修修改地址
export default {
  //挂在组件
  data(){
    return {
      visib:false,//不显示
      index:1
    }
  }
}
</script>

<style >
.zhenZhao{
  background:rgba(0,0,0,.3);
  position:absolute;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}
</style>